<template>
  <div id="app">
    <!-- 页面头部 -->
    <div class="head">
      <div class="head_one">
        <div class="head_link"><img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/images/76dcfc708847fdeff3d2ca67fc26419d.png?size=244*84" alt=""></div>
        <div class="head_change_area">切换地区 <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/arrow-expand.62b1a23.svg" alt=""></div>
      </div>
      <div class="head_two">新 型 冠 状 病 毒 肺 炎</div>
      <div class="head_three">疫情实时大数据报告</div>
      <div class="head_four">共 {{looksPersons.toLocaleString()}} 人次已浏览</div>
    </div>

    <!-- 页面切换 -->
    <div class="page_change">
      <van-tabs @change="countryChangeHandler" v-model="active" title-active-color="#10aeb5">
        <van-tab title="国内疫情"></van-tab>
        <van-tab title="国外疫情"></van-tab>
      </van-tabs>
    </div>

    <!-- 疫情数据 -->
    <div class="data_map" style="height:800px;padding: 0 1.025rem" v-if="tag_">
      <!-- 截止时间 -->
      <div class="end_time">
        <div>国内疫情</div>
        <div>
          <div>数据更新至 {{endTime}}</div>
          <div><img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png" alt=""> 数据说明</div>
        </div>
      </div>

      <!-- 数据列表 -->
      <div class="data_list">
        <div class="epidemic_details">
          <van-row class="epidemic_details_row">
            <van-col span="6">
              <div class="details_title"><span @click="show = true">现有确诊</span> <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png" alt=""> </div>
              <div class="details_confirmed_num">1426</div>
              <div class="details_yesterday">昨日<span style="color: #ed6856">+72</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title"><span>无症状</span> <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png" alt=""> </div>
              <div class="details_asymptomatic_num">254</div>
              <div class="details_yesterday">昨日<span style="color: #e86d48">+6</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title"><span>现有疑似</span> <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png" alt=""> </div>
              <div class="details_suspected_num">{{suspected}}</div>
              <div class="details_yesterday">昨日<span style="color: #ec9235">+2</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title">现有重症</div>
              <div class="details_severe_num">{{severe}}</div>
              <div class="details_yesterday">昨日<span style="color: #545499">-2</span> </div>
            </van-col>
          </van-row>

          <van-row class="epidemic_details_row epidemic_details_row2">
            <van-col span="6">
              <div class="details_title"><span>累计确诊</span>  </div>
              <div class="details_count_num">{{confirmed}}</div>
              <div class="details_yesterday">昨日<span style="color: #e83232">+129</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title"><span>境外输入</span> </div>
              <div class="details_outinput_num">{{outside}}</div>
              <div class="details_yesterday">昨日<span style="color: #476da0">+16</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title"><span>累计治愈</span> </div>
              <div class="details_cured_num">{{cure}}</div>
              <div class="details_yesterday">昨日<span style="color: #4dafb5">+56</span> </div>
            </van-col>
            <van-col span="6">
              <div class="details_title">累计死亡</div>
              <div class="details_died_num">{{dead}}</div>
              <div class="details_yesterday">昨日<span style="color: #4d5054">+1</span> </div>
            </van-col>
          </van-row>
        </div>
        
        <!-- 现有确诊弹框 -->
        <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click="show = false">
            <div class="block">
              1、数据来源:
              来自国家卫健委、各省市区卫健委、各省市
              区政府、港澳台官方渠道公开数据;
              2、数据统计原则:
              a)每日上午全国数据会优先使用国家卫健委
              公布的数据(此时各省市数据尚未及时更
              新，会出现全国数据大于各省份合计数的情
              况) ;
              b)当各省公布数据总和大于国家卫健委公布
              的数据时，则全国数据切换为各省合计数;
              c)全国数据含港澳台地区数据;
              3、数据更新时间:
              实时更新全国、各省市区数据，因需要核实
              计算，与官方发布的时间相比，将有一-定的
              时间延迟;
            </div>
          </div>
        </van-overlay>
      </div>

      <!-- 中国地图 -->
      <div class="china_map">
        <!-- 切换按钮 -->
        <van-tabs v-model="active_map" @change="mapChange">
          <van-tab title="现有确诊"></van-tab>
          <van-tab title="累计确诊"></van-tab>
        </van-tabs>

        <!-- 地图容器 -->
        <div class="map">
          <div id='main' element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="height:350px"></div>
        </div>

        <!-- 柱状图 -->
        <div class="bar">
          <div id="bar" style="height:300px"></div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="data_table">
        <div class="table_title">国内各地区疫情统计汇总 <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png" alt=""></div>
        <div class="table_tag">7:00-10:00为更新高峰，数据若滞后敬请谅解</div>
        <van-row class="tabel_title">
          <van-col span="5">疫情地区</van-col>
          <van-col span="3">现有</van-col>
          <van-col span="4">确诊</van-col>
          <van-col span="4">累计</van-col>
          <van-col span="4">治愈</van-col>
          <van-col span="3">死亡</van-col>
        </van-row>
        <van-row class="table_content" v-for="item in this.tableLists" :key="item.id">
          <van-col span="5">{{item.province}}</van-col>
          <van-col span="4">{{item.severe}}</van-col>
          <van-col span="4">{{item.confirmed}}</van-col>
          <van-col span="4">{{item.suspected}}</van-col>
          <van-col span="4">{{item.cure}}</van-col>
          <van-col span="3">{{item.dead}}</van-col>
        </van-row>
        <div style="text-align: center;font-size: 14px" @click="showAll">展开全部 <img src="https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/more.b2bd431.svg" style="transform: rotate(90deg)" alt=""></div>
      </div>
      <div style="height:500px"></div>
    </div>
    
    <div class="data_map" style="height:800px" v-else>
      <!-- 实时新闻 -->
      <div class="news" v-for='item in news_list' :key='item.id'>
        <!-- ｜ 是指管道符号，将左边的变量作为参数传递给右边的方法 -->
        <div class="time">{{item.publishTime | dateFMT}}</div>
        <div class="line">
          <div class="circle"></div>
          <div class="line_"></div>
        </div>
        <div class="article" @click="to_news_detail(item.id)">
          <h4 style="margin:0;">{{item.title}}</h4>
          <div v-html="item.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
  data() {
    return  {
      active: 0,
      active_map: 0,
      // 控制国家切换
      tag_: true,
      params: {
        page: 1,
        pageSize: 10
      },
      dataLists: [],
      looksPersons: '',
      endTime:'',
      confirmed: 0,
      suspected: 0,
      dead: 0,
      cure: 0,
      severe: 0,
      outside: 0,
      show: false,
      mapList:[],
      bar_data: {},
      tableLists: [],
      show_btn: true,
      news_list:[]
    }
  },
  created() {
    this.dataList()
    this.login()
    this.looks()
    this.findAll(name)
    this.findAllTable()
    this.find_news()
  },
  mounted() {
    // 2秒之后再绘制地图，也就是等待数据处理完毕
    setTimeout(()=>{
        this.initEchart()
        this.initBar()
    },2000)
  },
  // 过滤器
  filters: {
    // 处理日期格式
    dateFMT(str) {
      return moment(str).format('YYYY-MM-DD')
    }
  },
  watch: {
    mapList: {
      handler: function() {
        this.initEchart()
      },
      deep: true
    },
    // 当tag_发生改变时，重新调用绘制中国地图的方法，确保该方法在切换页面的时候每次都会调用
    tag_:{
      handler:function(val) {
        if(val) {
          setTimeout(() => {
            this.initEchart()
            this.initBar()
          }, 2000);
        }
      },
      deep:true // 深度监听
    }
  },
  methods: {
    // 跳转到新闻详情页
    to_news_detail(id) {
      /**
       * query:
       *  用于路由传递参数，也就是将参数拼接到地址栏上
       * 作用:
       *  解决页面刷新时数据丢失的现象
       */
      this.$router.push({
        path:'/news',
        query:{id}
      })
    },
    // 查询所有新闻
    find_news() {
      axios({
        url:'http://39.96.21.48:8001/article/findAll',
        method:'get'
      }).then((res)=>{
        // reverse() 是数组的api，用于反转数组的元素
        this.news_list = res.data.data.reverse()
        // console.log(this.news_list)
      })
    },
    findAllTable() {
      axios.get("http://39.96.21.48:8001/epidemic/pageQuery",{params: this.params}).then(res => {
        this.tableLists = res.data.data.list;
      })
    },
    // 展开表格
    showAll() {
      this.params.pageSize = 1000
      this.findAllTable(this.params)
      
    },
    // 柱状图
    initBar() {
      var myChart = echarts.init(document.getElementById('bar'));
      var option = {
        xAxis: {
            type: 'category',
            data: this.bar_data.name
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.bar_data.value,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
      }; 
      myChart.setOption(option);
      // myChart.on('click', function (params) {
      //     alert(params.name);
      // });
    },
    // 地图切换
    mapChange(name) {
      this.findAll(name)
    },
    // 获取所有省份数据
    findAll(name) {
      // console.log(name)
      // axios.baseURL = "/proxy";
      axios.get("/api/news/wap/fymap2020_data.d.json").then(res => {
        this.mapList = res.data.data.list.map(item => {
          if(name == 0) {
            // 现有确诊
            return {
              name: item.name,
              value: item.econNum
            }
          }else {
            // 累计确诊
            return {
              name: item.name,
              value: item.value
            }
          }
        })
        // console.log(this.mapList)
      })
    },
    // 初始化地图
    initEchart() {
      // console.log(2222)
      // 获取容器
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
        // 提示框
        tooltip: {
            //数据格式化
            formatter:function(params, callback){
                return params.seriesName+'<br />'+params.name+'：'+params.value
            }
        },
        // 视觉设置
        visualMap: {
            min: 0,
            max: 300,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],//取值范围的文字
            inRange: {
                color: ['#e0ffff', 'red']//取值范围的颜色
            },
            show:true//图注
        },
        geo: {
            map: 'china',
            roam: false,//不开启缩放和平移
            zoom:1.23,//视角缩放比例
            label: {
                normal: {
                    show: true,
                    fontSize:'10',
                    color: 'rgba(0,0,0,0.7)'
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: 'yellow',//鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        // 鼠标悬浮提示框
        series : [
            {
                name: '省份',
                type: 'map',
                geoIndex: 0,
                data:this.mapList
            }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
          alert(params.name);
      });
    },
    // 访问人数
    looks() {
      axios.get("/proxy/sop/api/epidemic").then(res => {
        this.looksPersons = res.data.data.epidemic
      })
    },
    // 获取token
    login() {
      var params = {
        username: 'admin',
        password: 123321
      }
      axios.post("http://39.96.21.48:8001/user/login",params).then(res => {
        localStorage.setItem("token",res.data.data.token)
      })
    },
    // 疫情详细数据
    dataList() {
      axios.get("http://39.96.21.48:8001/epidemic/pageQuery",{params: {page: 1,pageSize: 10000}}).then(res => {
        this.dataLists = res.data.data.list;
        // 数据详情
        this.dataLists.forEach((item) => {
          this.confirmed += item.confirmed;
          this.suspected += item.suspected;
          this.dead += item.dead;
          this.cure += item.cure;
          this.severe += item.severe;
          this.outside += item.outside;
        })
        // 截止时间
        this.endTime = moment(this.dataLists[0].inputTime).format('YYYY.MM.DD hh:mm');

        // 柱状图
        var bar_shanghai = this.dataLists.filter((item) => {
          return item.province == '上海市'
        })
        var severe_shanghai = 0;
        bar_shanghai.forEach(item => {
          severe_shanghai += item.severe
        })
        var bar_beijing = this.dataLists.filter((item) => {
          return item.province == '北京市'
        })
        var severe_beijing = 0;
        bar_beijing.forEach(item => {
          severe_beijing += item.severe
        })
        var bar_jiangsu = this.dataLists.filter((item) => {
          return item.province == '江苏省'
        })
        var severe_jiangsu = 0;
        bar_jiangsu.forEach(item => {
          severe_jiangsu += item.severe
        })

        // 黑龙江省
        var bar_heilongj = this.dataLists.filter((item) => {
          return item.province == '黑龙江省'
        })
        var severe_heilongj = 0;
        bar_heilongj.forEach(item => {
          severe_heilongj += item.severe
        })

        this.bar_data = {
          name: [bar_shanghai[0].province,bar_beijing[0].province,bar_jiangsu[0].province,bar_heilongj[0].province],
          value: [severe_shanghai,severe_beijing,severe_jiangsu,severe_heilongj]
        }
      }) 
    },
    // 国家切换
    countryChangeHandler(name) {
      if(name == 0) {
        // 显示国内疫情
        this.tag_ = true
      } else {
        // 显示国外疫情
        this.tag_ = false
      }
    }
  }
}
</script>

<style scoped>
  .data_map .news:last-child .line_ {
    height: 135px;
  }
  .line_ {
    height: 160px;
    width: 2px;
    background-color: #ebebeb;
    margin-left: 6px;
  }
  .circle {
    height:15px;
    width: 15px;
    background-size: 100% 100%;
    background-image: url('');
  }
  .article {
    left: 37%;
    width:58%;
    height: 138px;
    background-color: white;
    padding: 10px;
    overflow: hidden; /* 超出3行的部分以省略号的形式显示 */
    display: -webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; 
  }
  .line {
    left: 30%;
  }
  .time {
    left:5%;
    font-weight: 700;
    font-size: 14px;
  }
  .time ,.line ,.article {
    position: absolute;
  }
  .data_map {
    background-color: #f7f7f7;
    padding: 10px;
  }
  .news {
    position: relative;
    height: 175px;
  }
  .data_table >>> .tabel_title .van-col:not(:last-child) {
    margin-right: .125rem;
  }
  .data_table >>> .table_content .van-col:not(:first-child) {
    color: #555555;
  }
  .data_table >>> .table_content .van-col:first-child {
    background-color: #00bec9;
    color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-weight: 500;
    text-align: center;
  }
  .data_table >>> .van-col {
    padding: .5rem;
    font-size: 12px;
    text-align: center;
    background-color: #f5f6f7;
  }
  .data_table >>> .van-row {
    border-radius: 5px;
    margin-bottom: .3rem;
  }
  .table_title {
    line-height: 1rem;
  }
  .table_tag {
    color: #999;
    font-size: 13px;
    padding: .4rem 0 1rem 0;
  }
  #app >>> .china_map .van-tab--active {
    background-color: #fff;
    margin: .2rem;
    border-radius: 5px;
  }
  #app >>> .china_map .van-tabs__nav {
    background-color: #e3e6eb;
    border-radius: 10px;
    padding: 0;
  }
  #app >>> .china_map .van-tabs__line {
    height: 0;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 70%;
    height: 500px;
    padding: 1rem;
    background-color: #fff;
  }
  .epidemic_details_row2 {
    margin: 1rem 0;
  }
  .details_died_num {
    color: #4d5054;
  }
  .details_cured_num {
    color: #4dafb5;
  }
  .details_outinput_num {
    color: #476da0;
  }
  .details_count_num {
    color: #e83232;
  }
  .details_severe_num {
    color: #545499;
  }
  .details_suspected_num {
    color: #ec9235;
  }
  .epidemic_details_row .van-col div:nth-child(2){
    font-size: 20px;
    font-weight: 900;
  }
  .details_asymptomatic_num {
    color: #e86d48;
  }
  .details_confirmed_num {
    color: #ed6856;
  }
  .epidemic_details_row .details_yesterday {
    color: #999999;
    font-size: 11px; 
    font-weight: 600;
  }

  .epidemic_details_row .details_title {
    font-weight: 600;
    font-size: 15px;
  }
  img {
    width: .815rem;
    height: .815rem;
    display: inline-block;
  }
  .epidemic_details_row {
    text-align: center;
  }
  .epidemic_details {
    margin: 1rem 0;
  }
  #app >>> .van-grid-item__content::after,#app >>> .van-grid::after {
    border: none;
  }
  .data_list { 
    margin-top: 10px;
  }
  .end_time div:nth-child(2) div:nth-child(2) {
    float: right;
  }
  .end_time div:nth-child(2) div:nth-child(1) {
    float: left;
  }
  #app >>> .end_time div:nth-child(2) div:nth-child(2) > img{
    width: .8125rem;
    height: .8125rem;
    position: absolute;
    top: .1rem;
    left: -1rem;
  }
  .end_time div:nth-child(2) {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    position: relative;
  }
  .end_time > div:first-child {
    font-weight: 700;
    margin: 1rem 0 .625rem 0;
  }
  .end_time {
    height: 50px;
  }
  #app >>> .van-tab__text--ellipsis {
    font-size: 16px;
  }
  #app >>> .van-tabs__line {
    background-color: #0b9aa9;
    width: 60px;
  }
  .head_four {
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
    background: #0b9aa9;
    width: 50%;
    padding: 0 .625rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .head_three {
    background-image:-webkit-linear-gradient(bottom,#b2dee2,#fbfdfe);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; 
    font-size: 26px;
    font-weight: bolder;
    margin: .5rem 0;
  }
  .head_two {
    margin-top: 1.5rem;
    color: #c4faff;
    font-size: 14px;
    font-weight: 600;
  }
  .head_one {
    position: relative;
  }
  .head_one::after {
    display: block ;
    content: '';
    clear: both;
  }
  .head_link img {
    height: 28px;
    width: 80px;
  }
  .head_link {
    float: left;
    cursor: pointer;
  }
  .head_change_area {
    float: right;
    color: #276e71;
    position: absolute;
    right: 1rem;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
    background: #b1e9eb;
    padding: .2rem .3rem;
  }
  .head_change_area > img {
    height: 10px;
    width: 10px;
  }
  .head {
    background-image: url(https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/bg-header.840c435.jpg);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: -.625rem;
    padding: 1.0625rem;
  }
</style>
